<template>
	<view>
		<view class="navbar">
			<view class="fixed">
				订单列表
			</view>
			<view class="card_top">
				<view class="search_card flexs">
					<view class="search">
						<u-search searchIconSize='30' shape="square" height='70rpx' placeholder="请输入订单号/手机号"
							:showAction="false" v-model="keyword">
						</u-search>
					</view>
					<view class="search_btn" @click="getlist">
						查询订单
					</view>
				</view>
				<view class="tabs">
					<u-tabs @click='tabclick' :current='current' lineHeight='6rpx' lineWidth='60rpx' :list="list1"
						:activeStyle="{color: '#303133',fontWeight: '600',fontSize:'34rpx'}">
					</u-tabs>
				</view>
			</view>
		</view>

		<view class="" v-if="list.length==0">
			<emptyPage></emptyPage>
		</view>
		<view class="pad" v-else>
			<view class="card_item" v-for="item in list" :key="item.id">
				<view class="title flexc flexs">
					<view class="left flexc">
						<view class="left_num" v-if="item.code">
							{{item.code}}
						</view>
						<view class="left_text" v-if="item.order_type==1">自取订单</view>
						<view class="left_text" v-if="item.order_type==2">外卖订单</view>
						<view class="left_text" v-if="item.order_type==3">
							堂食订单
						</view>
					</view>
					<view class="right">
						<text v-if="item.status==1">待付款 </text>
						<text v-if="item.status==2">待收货 </text>
						<text v-if="item.status==3">已完成 </text>
						<text v-if="item.status==4">待退款 </text>

						<text v-if="item.status==5">已取消 </text>
						<text v-if="item.status==6">备餐 </text>
						<text v-if="item.status==7">出餐 </text>
						<text v-if="item.status==8">待取单 </text>
						<text v-if="item.status==9">已退款 </text>
					</view>
				</view>

				<view class="content">
					<view class="content_head flexs" v-if="item.dc_type==1">
						<view class="left flexc">
							<image :src="item.avatar" mode="aspectFill"></image>
							<view class="">
								{{item.username}}
							</view>
						</view>
						<image class='rightimg' v-if="item.subscribe_tel" @click="openTel(item.subscribe_tel)"
							src="../static/icon11.svg" mode="">
						</image>
					</view>
					<view class="content_item" v-if="item.order_type==3">
						<text class="gray">订单类型：</text><span v-if="item.p_type==1">先付后餐</span><span
							v-if="item.p_type==2">先餐后付</span>
					</view>
					<view class="content_item">
						<text class="gray">下单时间：</text>{{item.createtime | timerFormat}}<!-- 2023-07-28 16:58 -->
					</view>

					<view class="content_item">
						<text class="gray">订单编号：</text>{{item.order_no}}
					</view>

					<view class="content_item flexs flexc"
						@click="gopage(item.id,item.avatar,item.username,item.subscribe_tel,item.order_type)">
						<view class="">
							<text class="gray">订单金额：</text><text class="black">¥{{item.order_amount_total}}</text>
						</view>
						<view class="" style="padding-top: 16rpx;box-sizing: border-box;">
							<u-icon name="arrow-right" size="28rpx"></u-icon>
						</view>
					</view>
					<view class="content_item" v-if="item.status==4">
						<text class="gray">退款原因：</text><text class="orange">{{item.apply||'无'}}</text>
					</view>

					<view class="shops" :style="{'max-height': item.heg}">
						<view class="gray">
							商品明细:
						</view>
						<view class="shop flexc" v-for="item1 in item.detail" :key="item1.goods_id">
							<image :src="item1.goods_img" mode="aspectFill"></image>
							<view class="shop_item">
								<view class="flexs one">
									<view class="">{{item1.goods_name}}</view>
									<view class="">¥{{item1.goods_price}}</view>
								</view>
								<view class="two">
									{{item1.item_name}}
								</view>
								<view class="three">
									×{{item1.goods_count}}
								</view>
							</view>
						</view>
					</view>
					<view class="flexc-s setheg " v-if="item.detail.length>2">
						<view class="" @click="setheg(item.id)" v-if="item.heg=='320rpx'">
							展开(共{{item.detail.length}}件)
						</view>
						<view class="" @click="addheg(item.id)" v-else>
							收起(共{{item.detail.length}}件)
						</view>
						<view class="">
							<u-icon name="arrow-down" v-if="poptext=='展开'" size="28rpx"></u-icon>
							<u-icon name="arrow-up" v-else size="28rpx"></u-icon>
						</view>
					</view>

					<view class="" v-if="item.dc_type==2 && item.status==1">
						<view class="content_Bom flexc flexs flexw">
							<view class="btm3" style="margin-bottom: 20rpx;" @click="addAdish(item.id,item.seat_id)">
								去加餐
							</view>
							<view class="btm4" style="margin-bottom: 20rpx;" @click="over(item.id)">
								确认完成
							</view>
							<view class="btm4" @click="accounts(item.order_no)">
								扫码结账
							</view>
							<view class="btm3" @click="getPrint(item.id)">
								推送后台
							</view>
						</view>
					</view>
					<view class="" v-else>
						<view class="content_Bom" v-if="item.business_status==1 && item.status==6">
							<view class="jdbtn" @click="receiving_orders(item.id)">
								接单
							</view>
						</view>
						<view class="content_Bom flexc flexs" v-if="item.business_status==2">
							<view class="btm3" @click="getPrint(item.id)" v-if="item.dc_type==2">
								推送后台
							</view>
							<template v-else>
								<view class="btm3" @click="getPrint(item.id)" v-if="item.status !=='4' ">
									打印小票
								</view>
							</template>
							<view class="btm4" @click="send_out(item.id)" v-if="item.status==6">
								确认送出
							</view>
						</view>

						<view class="content_Bom flexc flexs" v-if="item.status==4 ">
							<view class="btm3" @click="resold_order(item)">
								拒绝退款
							</view>
							<view class="btm4" @click="refund(item)">
								同意退款
							</view>
						</view>

					</view>


				</view>
			</view>
		</view>

		<sjtabbar :ddShow='true' :pagesPath='pagesPath'></sjtabbar>
	</view>
</template>

<script>
	import {
		order_list,
		send_out,
		print,
		refund,
		receiving_orders,
		over,
		pay_code,
		resold_order
	} from '@/api/merchant.js'
	import _ from 'lodash';
	export default {
		data() {
			return {
				current: 0,
				poptext: "展开",
				pagesPath: '/pages/merchant/order/order',
				keyword: '',
				list1: [{
					name: '全部',
				}, {
					name: '待接单',
				}, {
					name: '已接单',
				}, {
					name: '已完成'
				}, {
					name: '待退款'
				}, {
					name: '待支付'
				}, {
					name: '已退款'
				}],
				heg: '320rpx',
				status: 2,
				list: [],
				page: 1,
				last_page: '',
				mark: true
			};
		},
		onLoad(e) {
			if (e.idx) {
				this.current = e.idx
			}
			this.getlist()
		},
		onShow() {
			this.page = 1
			this.getlist()
		},
		onReachBottom() {
			if (this.page < this.last_page) {
				this.page++
				this.getlist(1)
			} else {
				if (this.mark) {
					this.mark = false
					uni.$showMsg('已经到达最底部了')
				}
			}
		},
		methods: {
			// 退款
			async resold_order(item) {
				let res = await resold_order({
					id: item.id,
				})
				if (res.code == 1) {
					this.list.forEach(res => {
						if (res.id == item.id) {
							item.status = 6
						}
					})
					this.$forceUpdate()
				} else {
					this.getDetail()
					uni.$showMsg(res.msg)
				}
			},
			accounts(order_no) {
				this.scanCode().then(res => {
					let a = JSON.parse(res.result)
					pay_code({
						order_no,
						user_id: a.user_id
					}).then(res1 => {
						uni.$showMsg('支付成功')
						setTimeout(() => {
							this.unloadpage()
						}, 500)
					}).catch(err => {})

				})
			},
			addAdish(id, seat_id) {
				uni.setStorageSync('option', 3)
				uni.setStorageSync('tableNumber', true)
				uni.setStorageSync('scene', seat_id)
				uni.setStorageSync('addAdish', true)
				uni.setStorageSync('orderId', id)
				uni.navigateTo({
					url: '/pagesB/merchantOrder/merchantOrder'
				})
			},
			// 接单
			async receiving_orders(id) {
				let res = await receiving_orders({
					id
				})
				if (res.code == 1) {
					uni.$showMsg(res.msg)
					this.getlist()
				}
			},
			// 退款
			async refund(item) {
				let res = await refund({
					'order_no': item.order_no,
					'tag': 1
				})
				if (res.code == 1) {
					this.list.forEach(res => {
						if (res.id == item.id) {
							item.status = 9
						}
					})
					this.$forceUpdate()
					uni.$showMsg('退款成功')
				} else {
					this.getlist()
					uni.$showMsg(res.msg)
				}
			},
			// 打印小票
			async getPrint(id) {
				let res = await print({
					id
				})
				if (res.code == 1) {
					uni.$showMsg('打印成功')
				}
			},
			async over(id) {
				let res = await over({
					id
				})
				if (res.code == 1) {
					this.list.forEach(item => {
						if (item.id == id) {
							item.status = 3
						}
					})
				} else {
					uni.$showMsg(res.msg)
				}
			},
			// 确认接单
			async send_out(id) {
				let res = await send_out({
					id
				})
				if (res.code == 1) {
					this.list.forEach(item => {
						if (item.id == id) {
							item.status = 7
						}
					})
				}
				uni.$showMsg(res.msg)
			},
			// 打电话
			getphone(e) {
				this.openTel(e)
			},
			tabclick(e) {
				this.page = 1
				this.current = e.index
				this.keyword = ''
				this.getlist()
			},
			async getlist(e) {
				let res = await order_list({
					status: this.current,
					search: this.keyword,
					page: this.page,
					type: 0
				})
				if (e == 1) {
					this.list = [...this.list, ...res.data.data]
				} else {
					this.list = res.data.data
				}
				this.last_page = res.data.last_page
			},
			addheg(id) {
				this.list.forEach(item => {
					if (item.id == id) {
						item.heg = '320rpx'
					}
				})
			},
			setheg(id) {
				this.list.forEach(item => {
					if (item.id == id) {
						item.heg = ''
					}
				})
			},
			gopage(id, avatar, username, tel, order_type) {
				if (order_type == 3) {
					uni.navigateTo({
						url: `/pages/scan/orderDetail/orderDetail?id=${id}&avatar=${avatar}&username=${username}&tel=${tel}&order_type=${order_type}`
					})
				} else {
					uni.navigateTo({
						url: `/pages/merchant/orderDetail/orderDetail?id=${id}&avatar=${avatar}&username=${username}&tel=${tel}&order_type=${order_type}`
					})
				}

			}
		}
	}
</script>

<style lang="scss">
	page {
		min-height: 100vh;
		background: #FAFAFA;
		padding: 20vh 0 50rpx;
		box-sizing: border-box;
		background: #FAFAFA;
	}

	.navbar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		z-index: 999;
	}

	.fixed {
		height: 10vh;
		text-align: center;
		line-height: 13vh;
		font-size: 26rpx;
	}

	.card_top {
		// height: 200rpx;
		background-color: #fff;
		padding: 0rpx 35rpx 10rpx;
		box-sizing: border-box;

		.search_card {
			margin-bottom: 10rpx;

			.search {
				width: 440rpx;
			}

			.search_btn {
				width: 209rpx;
				height: 70rpx;
				background: #00ABFF;
				border-radius: 10rpx;
				text-align: center;
				line-height: 70rpx;
				font-size: 30rpx;
				color: #FFFFFF;
			}
		}
	}

	.pad {
		margin-top: 3vh;
		padding: 0rpx 26rpx;
		box-sizing: border-box;

		.card_item {
			width: 700rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			margin: 20rpx 0;

			.title {
				border-bottom: 1rpx solid #EBEBEB;
				padding: 14rpx 24rpx;
				box-sizing: border-box;

				.left {
					.left_num {
						padding: 4rpx 10rpx;
						box-sizing: border-box;
						background: #00ABFF;
						border-radius: 10rpx;
						font-size: 40rpx;
						font-weight: 500;
						color: #FFFFFF;
						text-align: center;
						line-height: 64rpx;
						margin-right: 20rpx;
					}

					.left_text {
						font-size: 36rpx;
						font-weight: 600;
						color: #333333;
						text-align: center;
						line-height: 64rpx;
					}
				}

				.right {
					font-size: 32rpx;
					color: #FF9C2E;
					line-height: 64rpx;
				}
			}

			.content {
				padding: 24rpx;
				box-sizing: border-box;

				.content_Bom {
					margin: 20rpx 0 0;

					.jdbtn {
						margin: 6rpx auto 0;
						width: 572rpx;
						height: 76rpx;
						background: #00ABFF;
						border-radius: 10rpx;
						text-align: center;
						line-height: 76rpx;
						font-size: 34rpx;
						color: #FFFFFF;
					}

					.btm1 {
						width: 200rpx;
						height: 76rpx;
						border-radius: 10rpx;
						border: 1rpx solid #FF9C2E;
						font-size: 34rpx;
						color: #FF9C2E;
						text-align: center;
						line-height: 76rpx;
					}

					.btm2 {
						width: 200rpx;
						height: 76rpx;
						background: #00ABFF;
						border-radius: 10rpx;
						font-size: 34rpx;
						color: #FFFFFF;
						text-align: center;
						line-height: 76rpx;
						border: 1rpx solid #00ABFF;
					}

					.btm3 {
						width: 300rpx;
						height: 76rpx;
						border-radius: 10rpx;
						border: 1rpx solid #FF9C2E;
						font-size: 34rpx;
						color: #FF9C2E;
						text-align: center;
						line-height: 76rpx;
					}

					.btm4 {
						width: 300rpx;
						height: 76rpx;
						background: #00ABFF;
						border-radius: 10rpx;
						font-size: 34rpx;
						color: #FFFFFF;
						text-align: center;
						line-height: 76rpx;
						border: 1rpx solid #00ABFF;
					}
				}

				.content_item {
					font-size: 30rpx;
					font-weight: 400;
					color: #333333;
					margin: 20rpx 0;
				}

				.orange {
					font-size: 30rpx;
					color: #FF9C2E;
				}

				.gray {
					font-size: 30rpx;
					color: #777777;
				}

				.black {
					font-size: 36rpx;
					font-weight: 600;
					color: #333333;
				}

				.content_head {
					.left {
						image {
							width: 60rpx;
							height: 60rpx;
							border-radius: 50%;
							margin-right: 20rpx;
						}

						font-size: 32rpx;
						font-weight: 600;
						color: #333333;
						line-height: 60rpx;
					}

					.rightimg {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
					}
				}

				.setheg {
					padding: 30rpx 0 16px;
					box-sizing: border-box;
					width: 690rpx;
					text-align: center;
					font-size: 24rpx;
					color: #777777;
					text-align: center;
					margin: 0 auto;
				}

				.shops {
					overflow: hidden;

					.shop {
						margin: 20rpx 0;

						image {
							width: 122rpx;
							height: 120rpx;
							border-radius: 10rpx;
							margin-right: 20rpx;
						}

						.shop_item {
							width: 500rpx;

							.one {
								font-size: 30rpx;
								color: #333333;
							}

							.two {
								font-size: 24rpx;
								color: #777777;
								margin: 6rpx 0;
							}

							.three {
								font-size: 24rpx;
								color: #777777;
							}
						}
					}
				}

			}


		}
	}
</style>